//实名认证
import React, { useState, useEffect, useMemo, useRef } from 'react';
import CommonModal from '@/components/CommonModal';
import CommonQinnvImgsLoad from './CommonQinnvImgsLoad';
import CheckCellPhoneCodeModal from './CheckCellPhoneCodeModal';
import ComfortableTipsModal from './ComfortableTipsModal';
import AntdWrapper from './AntdWarp/index';
import CommonLoading from '@/components/CommonLoading';
import { isEmpty, find } from 'lodash';
import { IdCardDesensitization } from '@/utils/utils.jsx';
import {
  submitAttestation,
  getPanoccupationList,
  getAllArea,
  addressParse,
} from './service';
import moment from 'moment';
import {
  Alert,
  DatePicker,
  Form,
  Button,
  Radio,
  Input,
  message,
  Tooltip,
  Select,
  Cascader,
} from 'antd';
import styles from './index.module.less';

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Option } = Select;
const deteFormat = 'YYYY-MM-DD';

const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

const AddAuthentication = ({
  visible,
  accountExtend,
  //   accountExtendJM,
  userAccountType,
  isUpgrade,
  handleCancel,
  handleOk,
}) => {
  const [form] = Form.useForm();

  const [accountType, setAccountType] = useState(3); //用户类型
  const [title, setTitle] = useState('选择类型');
  const [step, setStep] = useState(1);
  const [tipsMsg, setTipsMsg] = useState(null); //温馨提示弹窗
  const [topKey, setTopKey] = useState(0);
  const [leftKey, setLeftKey] = useState(0);
  const [rightKey, setRightKey] = useState(0);
  const [previewVisible, setPreviewVisible] = useState(false); //查看图片弹窗的visible
  const [previewImage, setPreviewImage] = useState(''); //查看身份证的图片预览
  const [previewImageKey, setPreviewImageKey] = useState(1); //查看身份证的图片预览
  const [codeVisible, setCodeVisible] = useState(false); //手机验证码弹窗visible
  const [verification, setVerification] = useState(true); //判断是否是第一次验证(是否需要重新发送验证码)
  const [showIdCardDimImg, setShowIdCardDimImg] = useState(false); //身份证正面是否模糊图片显示
  const [showGuoHuiimImg, setShowGuoHuiDimImg] = useState(false); //身份证反面面是否模糊图片显示
  const [showBusinessLicenseDimImg, setBusinessLicenseDimImg] = useState(false); //营业执照是否模糊图片显示
  const [jobList, setJobList] = useState([]); //职业
  const [areaAata, setAreaData] = useState([]); //地址及联
  const [loading, setLoading] = useState(false);

  const { userType, hasOpenClassIIAccount } = userAccountType;

  const AuthenticationParams = useRef({
    // address: undefined,
    issueDate: undefined,
    expiryDate: undefined,
    // detail: undefined,
    provinceName: undefined,
    cityName: undefined,
    countyName: undefined,
  }); //点击认证需要提交的信息

  useEffect(() => {
    if (visible) {
      queryPanoccupationList();
      queryAllArea();
      form.resetFields();
      if (userType == 1 || Object.keys(accountExtend).length > 0) {
        //大用户或是编辑直接跳过第一步
        setStep(2);
      }
      if (Object.keys(accountExtend).length > 0) {
        //编辑状态
        setAccountType(accountExtend?.accountType);
        // AuthenticationParams.current.address = accountExtend?.address;
        AuthenticationParams.current.sex = accountExtend?.sex;
        AuthenticationParams.current.issueDate = accountExtend?.issueDate;
        AuthenticationParams.current.expiryDate = accountExtend?.expiryDate;
        AuthenticationParams.current.provinceName = accountExtend?.provinceName; //省
        AuthenticationParams.current.cityName = accountExtend?.cityName; //市
        AuthenticationParams.current.countyName = accountExtend?.countyName; //区
        if (accountExtend.accountType == 1) {
          setTitle('修改个人认证');
          if (isUpgrade) {
            setTitle('升级企业认证');
            setAccountType(3);
          }
          if (userType == 1) {
            //大用户
            setTitle('企业认证');
            setAccountType(3);
          }
        } else {
          setTitle('修改企业认证');
          setBusinessLicenseDimImg(true);
        }
        setShowIdCardDimImg(true);
        setShowGuoHuiDimImg(true);
      } else {
        if (userType == 1) {
          //大用户
          setTitle('企业认证');
          setAccountType(3);
        }
      }
    }
  }, [visible]);

  //获取职业列表
  const queryPanoccupationList = async () => {
    setLoading(true);
    const { success, data = [] } = await getPanoccupationList();
    if (success) {
      setJobList(data);
    }
    setLoading(false);
  };

  //获取省市区
  const queryAllArea = async () => {
    setLoading(true);
    const { success, data } = await getAllArea();
    if (success) {
      setAreaData(data);
    }
    setLoading(false);
  };

  const renderFooter = useMemo(() => {
    if (step == 1) {
      return (
        <>
          <Button key="cancel" onClick={handleCancel}>
            取消
          </Button>
          <Button key="next" onClick={() => nextStep()} type="primary">
            下一步
          </Button>
        </>
      );
    } else {
      return (
        <>
          <Button
            // disabled={userType == 1 || Object.keys(accountExtend).length > 0}
            className={styles.closeBtn}
            key="prev"
            onClick={() => prevStep()}
          >
            上一步
          </Button>
          <Button
            className={styles.okBtn}
            key="sure"
            onClick={() => onOk()}
            type="primary"
          >
            确定
          </Button>
        </>
      );
    }
  }, [step, accountType, jobList]);

  //点击确定
  const onOk = () => {
    // console.log('提交accountType', accountType);
    setLoading(true);
    form.validateFields().then(async (value) => {
      const {
        frontUrl,
        backUrl,
        name,
        nation,
        idCard,
        licenseName,
        licenseUrl,
        socialCreditCode,
        occupation,
        area,
        detail,
      } = value;
      const {
        // address,
        issueDate,
        expiryDate,
        sex,
        provinceName,
        cityName,
        countyName,
      } = AuthenticationParams.current;
      const occupationNameItem =
        occupation && !isEmpty(jobList)
          ? find(jobList, ['code', occupation])
          : {};
      const { data, success } = await submitAttestation({
        accountType,
        frontUrl,
        backUrl,
        name,
        nation,
        idCard:
          IdCardDesensitization(accountExtend.idCard) == idCard
            ? accountExtend?.idCard
            : idCard,
        detail: detail == '**********' ? accountExtend?.detail : detail,
        issueDate,
        expiryDate,
        licenseName,
        licenseUrl,
        socialCreditCode,
        sex,
        provinceCode: area[0],
        cityCode: area[1],
        countyCode: area[2],
        provinceName,
        cityName,
        countyName,
        occupation,
        occupationName: occupationNameItem?.name,
      });
      if (success) {
        // stageData.current = { ...stageData.current, ...(data || {}) };
        if (data) {
          message.success(`${title}成功`);
          handleOk();
        }
      }
    });
    setLoading(false);
  };

  //点击上一步
  const prevStep = () => {
    if (userType == 1 || Object.keys(accountExtend).length > 0) {
      //新用户和编辑进来的直接关闭弹窗
      handleCancel();
    } else {
      setStep(1);
      setTitle('选择类型');
    }
  };

  //点击下一步
  const nextStep = () => {
    setStep(2);
    if (accountType == 1) {
      setTitle('个人认证');
    } else {
      setTitle('企业认证');
    }
  };

  //图片上传回调手动更新表单值
  const handleDone = (type, res, file) => {
    if (res) {
      const { success, data, msg } = res;
      if (success) {
        const {
          name,
          cardNo,
          nation,
          address,
          cardFrontUrl,
          cardBackUrl,
          expiryDate,
          issueDate,
          url,
          sex,
          creditCode,
        } = data || {};
        if (type == 'front') {
          //身份证正面
          form.setFieldsValue({
            name,
            nation,
            idCard: cardNo,
            frontUrl: cardFrontUrl,
          });
          handleAddressParse(address);
          //   AuthenticationParams.current.address = address;
          AuthenticationParams.current.sex = sex;
          setShowIdCardDimImg(false);
        } else if (type == 'back') {
          //身份证反面
          AuthenticationParams.current.issueDate = issueDate;
          AuthenticationParams.current.expiryDate =
            expiryDate == '长期' ? '2099.01.01' : expiryDate;
          form.setFieldsValue({
            backUrl: cardBackUrl,
            time: [
              transFormTime(issueDate),
              transFormTime(expiryDate == '长期' ? '2099.01.01' : expiryDate),
            ],
          });
          setShowGuoHuiDimImg(false);
        } else {
          //营业执照
          form.setFieldsValue({
            licenseUrl: url,
            licenseName: name,
            socialCreditCode: creditCode,
          });
          setBusinessLicenseDimImg(false);
        }
      } else {
        setTipsMsg({
          type: 1,
          key: type,
          reason: msg,
        });
      }
    } else {
      if (type == 'front') {
        form.setFieldsValue({
          frontUrl: undefined,
        });
      } else if (type == 'back') {
        form.setFieldsValue({
          backUrl: undefined,
        });
      } else {
        //营业执照
        form.setFieldsValue({
          licenseUrl: undefined,
        });
      }
    }
  };

  //解析身份证地址
  const handleAddressParse = async (val) => {
    setLoading(true);
    const { success, data = {} } = await addressParse({
      address: val,
    });
    if (success) {
      const {
        detail,
        provinceCode,
        cityCode,
        countyCode,
        provinceName,
        cityName,
        countyName,
      } = data;
      form.setFieldsValue({
        detail: detail.length > 100 ? detail.slice(0, 100) : detail,
        area: provinceCode ? [provinceCode, cityCode, countyCode] : undefined,
      });
      AuthenticationParams.current.provinceName = provinceName;
      AuthenticationParams.current.cityName = cityName;
      AuthenticationParams.current.countyName = countyName;
    }
    setLoading(false);
  };

  //省市区级联选择
  const handleChange = (val, option) => {
    if (!isEmpty(option)) {
      AuthenticationParams.current.provinceName = option[0].name;
      AuthenticationParams.current.cityName = option[1].name;
      AuthenticationParams.current.countyName = option[2].name;
    }
  };

  //时间范围选择的切换
  const dateOnChange = (dates, dateStrings) => {
    if (dates) {
      AuthenticationParams.current.issueDate = dateStrings[0];
      AuthenticationParams.current.expiryDate = dateStrings[1];
    } else {
      console.log('Clear');
    }
  };

  //时间的转化
  const transFormTime = (time) => {
    if (time) {
      return moment(time.replace(/'.'/g, '/'), deteFormat);
    }
  };

  //修改/升级企业认证信息，开通二类户部分信息不能修改
  const fromDisable = useMemo(() => {
    if (
      (Object.keys(accountExtend).length > 0 &&
        accountExtend.accountType != 1) ||
      isUpgrade
    ) {
      if (hasOpenClassIIAccount) {
        //开通二类户
        return true;
      }
      return false;
    }
  }, [accountExtend, userAccountType, isUpgrade]);

  //点击查看照片
  const handleView = (url) => {
    if (verification) {
      setCodeVisible(true);
    } else {
      setPreviewVisible(true);
    }
    setPreviewImageKey(previewImageKey + 1);
    setPreviewImage(url);
  };

  //查看上传照片
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImageKey(previewImageKey + 1);
    setPreviewImage(file.url || file.preview);
    setPreviewVisible(true);
  };

  //输入验证码弹窗
  const CheckCellPhoneCodeModalProps = {
    visible: codeVisible,
    handleCancel() {
      setCodeVisible(false);
    },
    handleOk(val) {
      if (val) {
        setCodeVisible(false);
        // setPreviewImage(val);
        setPreviewVisible(true);
        setVerification(false);
      }
    },
  };

  //温馨提示modal
  const tipsModalProps = {
    tipsMsg,
    handleOk() {
      tipsMsg.key == 'licenseUrl' && setTopKey(leftKey + 1);
      tipsMsg.key == 'front' && setLeftKey(leftKey + 1);
      tipsMsg.key == 'back' && setRightKey(rightKey + 1);
      setTipsMsg(null);
    },
  };

  //职业下拉option
  const jobListOptions =
    !isEmpty(jobList) &&
    jobList.map((d, index) => (
      <Option key={d.code} value={d.code} label={d.name + d.code}>
        <Tooltip title={`${d.name} ${d.code ? `(${d.code})` : ''} `}>
          {d.name}
          {d.code ? `(${d.code})` : ''}
        </Tooltip>
      </Option>
    ));

  return (
    <CommonModal
      title={title}
      visible={visible}
      onCancel={handleCancel}
      width={step == 1 ? 520 : 544}
      minHeight={step == 1 ? 120 : 250}
      footer={renderFooter}
      //   noPadding={step == 1 ? false : true}
      className={step == 1 ? '' : styles.addAuthenticationBox}
    >
      {step == 1 ? (
        <>
          <div
            style={{ display: 'flex', marginTop: '4px', marginLeft: '60px' }}
          >
            <Radio.Group
              onChange={(e) => setAccountType(e.target.value)}
              value={accountType}
            >
              <Radio value={3}>企业认证</Radio>
              <p style={{ height: '6px' }}></p>
              <Radio value={1}>个人认证</Radio>
            </Radio.Group>
          </div>
          <div style={{ marginTop: '30px', marginLeft: '30px' }}>
            <p style={{ marginBottom: '20px' }}>
              <span style={{ fontWeight: 600 }}>企业认证：</span>
              无交易额度限制，
              <span className="common-color9">
                推荐使用企业认证，降低税务风险。
              </span>
            </p>
            <p>
              <span style={{ fontWeight: 600 }}>个人认证：</span>
              交易限额1W人民币/天，20W人民币/年，
              <span className="common-color9">推荐使用企业认证。</span>
            </p>
          </div>
        </>
      ) : (
        <div>
          <Alert
            type="info"
            showIcon
            message="鉴于银行监管要求，以及不影响后续系统操作，需要您完善以下信息进行实名验证！"
          />
          <div style={{ marginTop: '30px' }}>
            <Form
              name="add-person-account-attestation"
              form={form}
              {...layout}
              initialValues={{
                name: accountExtend?.userName,
                idCard: accountExtend.idCard
                  ? IdCardDesensitization(accountExtend.idCard)
                  : '',
                nation: accountExtend?.nation,
                licenseUrl: accountExtend?.businessLicenseUrl,
                frontUrl: accountExtend?.idCardFrontUrl,
                backUrl: accountExtend?.idCardBackUrl,
                licenseName: accountExtend?.licenseName,
                socialCreditCode: accountExtend?.socialCreditCode,
                occupation: accountExtend.occupation
                  ? accountExtend?.occupation
                  : '10700',
                detail: accountExtend.detail ? '**********' : '',
                area: accountExtend?.provinceName
                  ? [
                      accountExtend?.provinceCode,
                      accountExtend?.cityCode,
                      accountExtend?.countyCode,
                    ]
                  : [],
                time: [
                  transFormTime(accountExtend?.issueDate),
                  transFormTime(
                    accountExtend?.expiryDate == '长期'
                      ? '2099.01.01'
                      : accountExtend?.expiryDate
                  ),
                ],
              }}
              style={{ marginTop: '8px' }}
            >
              {accountType != 1 && (
                <div
                //   label={<span className="lable-require">营业执照</span>}
                >
                  <div className={styles.itemTitle}>营业执照</div>
                  <Form.Item
                    name="licenseUrl"
                    rules={[{ required: true, message: '图片不能为空' }]}
                    style={{ marginBottom: '0px' }}
                  >
                    <CommonQinnvImgsLoad
                      key={topKey}
                      className={
                        showBusinessLicenseDimImg
                          ? 'rectangleLargeBlur'
                          : 'rectangleLarge'
                      }
                      actionUrl="/zjf-pays/imgOcr/license?type=1"
                      customText="上传营业执照"
                      size={10}
                      img={accountExtend?.businessLicenseUrlJM}
                      handleOk={(val, file) =>
                        handleDone('licenseUrl', val, file)
                      }
                      onPreview={(file) => {
                        showBusinessLicenseDimImg
                          ? handleView(accountExtend?.businessLicenseUrlJM)
                          : handlePreview(file);
                      }}
                      //   handleImgRemove={() => handleImgRemove('licenseUrl')}
                      handleFailed={() => setTopKey(topKey + 1)}
                      customNode={
                        <div
                          className={`${styles.uploadWrap} ${styles.businessLiense}`}
                        >
                          <div className={styles.uploadIconBox}>+</div>
                        </div>
                      }
                    />
                  </Form.Item>
                </div>
              )}

              <div style={{ marginBottom: '20px' }}>
                <div className={styles.itemTitle}>
                  {accountType != 1 ? '法人身份证照片' : '身份证照片'}
                </div>
                <div style={{ display: 'flex', justifyContent: 'end' }}>
                  <div>
                    <Form.Item
                      name="frontUrl"
                      rules={[{ required: true, message: '图片不能为空' }]}
                      style={{ marginBottom: '0px' }}
                    >
                      <CommonQinnvImgsLoad
                        key={leftKey}
                        className={
                          showIdCardDimImg
                            ? 'rectangleSmallBlur'
                            : 'rectangleSmall'
                        }
                        actionUrl="/zjf-pays/imgOcr/cardFront"
                        img={accountExtend?.idCardFrontUrlJM}
                        customText="身份证人像面"
                        size={10}
                        disabled={fromDisable}
                        handleOk={(val, file) => handleDone('front', val, file)}
                        handleFailed={() => setLeftKey(leftKey + 1)}
                        onPreview={(file) => {
                          showIdCardDimImg
                            ? handleView(accountExtend?.idCardFrontUrlJM)
                            : handlePreview(file);
                        }}
                        customNode={
                          <div
                            className={`${styles.uploadWrap} ${styles.identityFront}`}
                          >
                            <div className={styles.uploadIconBox}>+</div>
                          </div>
                        }
                      />
                    </Form.Item>
                    <p style={{ textAlign: 'center' }}>身份证人像面</p>
                  </div>
                  <div style={{ marginLeft: '30px' }}>
                    <Form.Item
                      name="backUrl"
                      rules={[{ required: true, message: '图片不能为空' }]}
                      style={{ marginBottom: '0px' }}
                    >
                      <CommonQinnvImgsLoad
                        key={rightKey}
                        className={
                          showGuoHuiimImg
                            ? 'rectangleSmallBlur'
                            : 'rectangleSmall'
                        }
                        actionUrl="/zjf-pays/imgOcr/cardBack"
                        img={accountExtend?.idCardBackUrlJM}
                        customText="身份证国徽面"
                        size={10}
                        disabled={fromDisable}
                        handleOk={(val, file) => handleDone('back', val, file)}
                        handleFailed={() => setRightKey(rightKey + 1)}
                        onPreview={(file) => {
                          showGuoHuiimImg
                            ? handleView(accountExtend?.idCardBackUrlJM)
                            : handlePreview(file);
                        }}
                        customNode={
                          <div
                            className={`${styles.uploadWrap} ${styles.identityBack}`}
                          >
                            <div className={styles.uploadIconBox}>+</div>
                          </div>
                        }
                      />
                    </Form.Item>
                    <p style={{ textAlign: 'center' }}>身份证国徽面</p>
                  </div>
                </div>
              </div>

              {accountType != 1 && (
                <>
                  <AntdWrapper>
                    <Form.Item
                      colon={false}
                      label="营业执照名称"
                      name="licenseName"
                      rules={[
                        { required: true, message: '请输入营业执照名称' },
                      ]}
                    >
                      <Input size="default" placeholder="请输入营业执照名称" />
                    </Form.Item>
                  </AntdWrapper>

                  <AntdWrapper>
                    <Form.Item
                      colon={false}
                      label="社会统一信用代码"
                      name="socialCreditCode"
                      rules={[
                        { required: true, message: '请输入社会统一信用代码' },
                      ]}
                    >
                      <Input
                        size="default"
                        placeholder="请输入社会统一信用代码"
                      />
                    </Form.Item>
                  </AntdWrapper>
                </>
              )}

              <AntdWrapper>
                <Form.Item
                  label={accountType != 1 ? '法人姓名' : '开户人姓名'}
                  name="name"
                  colon={false}
                  rules={[
                    {
                      required: true,
                      message:
                        accountType != 1
                          ? '请输入法人姓名'
                          : '请输入开户人姓名',
                    },
                    {
                      pattern: /^[\u4e00-\u9fa5\·•]{1,20}$/g,
                      message: '请输入文字',
                    },
                  ]}
                >
                  <Input
                    placeholder={
                      accountType != 1 ? '请输入法人姓名' : '请输入开户人姓名'
                    }
                    size="default"
                    disabled={fromDisable}
                    maxLength={20}
                  />
                </Form.Item>
              </AntdWrapper>

              <AntdWrapper>
                <Form.Item
                  label={accountType != 1 ? '法人身份证号' : '开户人身份证号'}
                  name="idCard"
                  colon={false}
                  rules={[
                    { required: true, message: '请输入身份证号' },
                    // {
                    //   pattern: /^[0-9a-zA-Z]{1,20}$/g,
                    //   message: '仅支持数字和字母',
                    // },
                    {
                      validator: async (_, idCard) => {
                        if (accountExtend.idCard) {
                          if (
                            IdCardDesensitization(accountExtend.idCard) !=
                            idCard
                          ) {
                            if (!/^[0-9a-zA-Z]{1,20}$/g.test(idCard)) {
                              return Promise.reject(
                                new Error('仅支持数字和字母')
                              );
                            }
                          }
                        } else {
                          if (idCard && !/^[0-9a-zA-Z]{1,20}$/g.test(idCard)) {
                            return Promise.reject(
                              new Error('仅支持数字和字母')
                            );
                          }
                        }
                      },
                    },
                  ]}
                >
                  <Input
                    placeholder={
                      accountType != 1
                        ? '请输入法人身份证号'
                        : '请输入开户人身份证号'
                    }
                    size="default"
                    disabled={fromDisable}
                    maxLength={20}
                  />
                </Form.Item>
              </AntdWrapper>

              <AntdWrapper>
                <Form.Item
                  label="民族"
                  name="nation"
                  colon={false}
                  rules={
                    isUpgrade && hasOpenClassIIAccount == 1
                      ? []
                      : [{ required: true, message: '请输入民族' }]
                  }
                >
                  <Input
                    size="default"
                    placeholder="请输入民族"
                    disabled={fromDisable}
                  />
                </Form.Item>
              </AntdWrapper>

              <AntdWrapper>
                <Form.Item
                  label="身份证有效期"
                  name="time"
                  colon={false}
                  rules={
                    isUpgrade && hasOpenClassIIAccount == 1
                      ? []
                      : [{ required: true, message: '请输入身份证有效期' }]
                  }
                >
                  <RangePicker
                    disabled={fromDisable}
                    format={deteFormat}
                    onChange={dateOnChange}
                    size="middle"
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </AntdWrapper>

              <AntdWrapper>
                <Form.Item
                  label="职业"
                  rules={[{ required: true, message: '请选择职业' }]}
                  name="occupation"
                >
                  <Select
                    showSearch
                    optionFilterProp="label"
                    placeholder="全部"
                    allowClear
                    size="default"
                  >
                    {jobListOptions}
                  </Select>
                </Form.Item>
              </AntdWrapper>

              <AntdWrapper>
                <Form.Item
                  name="area"
                  label="省市区"
                  rules={[{ required: true, message: '请选择省市区' }]}
                >
                  <Cascader
                    options={areaAata}
                    onChange={handleChange}
                    size="default"
                    fieldNames={{
                      label: 'name',
                      value: 'code',
                      children: 'children',
                    }}
                    placeholder="请选择省市区"
                  />
                </Form.Item>
              </AntdWrapper>

              <AntdWrapper>
                <Form.Item
                  name="detail"
                  label="详细地址"
                  rules={[{ required: true, message: '请输入详细地址' }]}
                >
                  <TextArea
                    rows={4}
                    maxLength="100"
                    placeholder="最多100个字符"
                  />
                </Form.Item>
              </AntdWrapper>
            </Form>
          </div>
        </div>
      )}
      {/* 温馨提示 */}
      {tipsMsg && <ComfortableTipsModal {...tipsModalProps} />}
      {/* 短信验证码弹窗 */}
      <CheckCellPhoneCodeModal {...CheckCellPhoneCodeModalProps} />
      {/* 图片预览弹窗 */}
      <CommonModal
        visible={previewVisible}
        title="图片预览"
        footer={null}
        onCancel={() => setPreviewVisible(false)}
      >
        <img
          key={previewImageKey}
          alt=""
          style={{ width: '100%' }}
          src={previewImage}
        />
      </CommonModal>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default AddAuthentication;
